import React, { useState, useRef } from "react";
import "./Header.css";
import { FilterOutline } from "antd-mobile-icons";
import { Tabs, Dropdown } from "antd-mobile";
import SearchBar from "./SearchBar";
import List from "./List";

export default function Header() {
  const [type, setType] = useState("all");
  const ref = useRef();

  return (
    <div>
      <SearchBar></SearchBar>
      <div>
        <Tabs
          style={{
            "--active-line-color": "rgb(255,0,0)",
            "--active-title-color": "rgb(255,0,0)",
            "--active-line-height": "4px",
          }}
          onChange={(key) => {
            if (key !== "sift") {
              setType(key);
            }
            console.log(key);
          }}
        >
          <Tabs.Tab title="综合" key="all"></Tabs.Tab>
          <Tabs.Tab title="销量" key="sales"></Tabs.Tab>
          <Tabs.Tab title="口碑" key="publicPraise"></Tabs.Tab>
          <Tabs.Tab
            title={
              <Dropdown ref={ref}>
                <Dropdown.Item
                  key="sift"
                  title={
                    <span>
                      <span style={{ fontSize: "1.0938rem" }} className="shai">
                        筛选
                      </span>
                      <FilterOutline />
                    </span>
                  }
                >
                  <div style={{ padding: 12, height: "15rem" }}>
                    <div style={{ marginTop: "0.625rem" }}>
                      <div style={{ display: "flex", alignItems: "center" }}>
                        <p
                          style={{
                            borderLeft: "0.3125rem solid rgb(255,0,0)",
                            marginLeft: "0.9735rem",
                            height: "0.9735rem",
                            borderRadius: "0.125rem",
                          }}
                        ></p>
                        <p
                          style={{
                            fontSize: "1.125rem",
                            paddingLeft: "0.625rem",
                          }}
                        >
                          人均消费
                        </p>
                      </div>
                      <ul className="one">
                        <li>10元以下</li>
                        <li>10-30元</li>
                        <li>30元以上</li>
                      </ul>
                    </div>
                    <div style={{ marginTop: "1.5625rem" }}>
                      <div style={{ display: "flex", alignItems: "center" }}>
                        <p
                          style={{
                            borderLeft: "0.3125rem solid rgb(255,0,0)",
                            marginLeft: "0.9735rem",
                            height: "0.9735rem",
                            borderRadius: "0.125rem",
                          }}
                        ></p>
                        <p
                          style={{
                            fontSize: "1.125rem",
                            paddingLeft: "0.625rem",
                          }}
                        >
                          商品配送
                        </p>
                      </div>
                      <ul className="one">
                        <li>顺丰快递</li>
                        <li>圆通快递</li>
                        <li>申通快递</li>
                      </ul>
                    </div>给我看看渲染出来的页面是什么
                  </div>
                  <div
                    style={{
                      width: "100%",
                      display: "flex",
                      justifyContent: "space-around",
                    }}
                  >
                    <button className="btn" style={{ background: "white" }}>
                      清空
                    </button>
                    <button
                      className="btn"
                      style={{
                        background: "rgb(255,0,0)",
                        color: "white",
                      }}
                      onClick={() => {
                        ref.current?.close();
                      }}
                    >
                      确定
                    </button>
                  </div>
                </Dropdown.Item>
              </Dropdown>
            }
            key="sift"
          ></Tabs.Tab>
        </Tabs>
      </div>
      <List type={type}></List>
    </div>
  );
}
